<template>
  <div>
    <el-form inline>
      <el-form-item>
        <pickArea :showArea="false" @getSite="getCity"></pickArea>
      </el-form-item>
      <el-form-item>
        <el-autocomplete
          class="inline-input"
          v-model="query.stationName"
          placeholder="请输入监测站名称"
          :fetch-suggestions="querySearch"
          @select="handleSelect"
        >
        </el-autocomplete>
        <el-button type="primary" @click="getStation">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="addStation"
          >添加检测站</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="stationData" style="width: 100%">
      <el-table-column prop="name" label="监测站名称"> </el-table-column>
      <el-table-column prop="liaisonName" label="监测站联系人">
      </el-table-column>
      <el-table-column prop="liaisonPhone" label="联系人电话">
      </el-table-column>
      <el-table-column prop="equipmentInfo" label="设备信息"> </el-table-column>
      <el-table-column prop="businessHours" label="营业时间"> </el-table-column>
      <el-table-column prop="operation" label="操作" width="150">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="getStationDetail(scope.row)"
            >详情</el-button
          >
          <el-button type="info" size="small" @click="updateStation(scope.row)"
            >修改</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="query.pageNum"
      :page-size="query.pageSize"
      layout="prev, pager, next, jumper"
      :total="query.total"
    >
    </el-pagination>
    <el-dialog title="检测站详情" :visible.sync="centerDialogVisible" center>
      <el-descriptions :border="true">
        <el-descriptions-item label="id">{{ station.id }}</el-descriptions-item>
        <el-descriptions-item label="检测站名称">{{
          station.name
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人姓名">{{
          station.liaisonName
        }}</el-descriptions-item>
        <el-descriptions-item label="联系人电话">{{
          station.liaisonPhone
        }}</el-descriptions-item>
        <el-descriptions-item label="银行名称">{{
          station.bankName
        }}</el-descriptions-item>
        <el-descriptions-item label="银行账号">{{
          station.bankAccount
        }}</el-descriptions-item>
        <el-descriptions-item label="安全检测价格">{{
          station.safePrice
        }}</el-descriptions-item>
        <el-descriptions-item label="设备信息">{{
          station.equipmentInfo
        }}</el-descriptions-item>
        <el-descriptions-item label="营业时间">{{
          station.businessHours
        }}</el-descriptions-item>
        <el-descriptions-item label="环境检测价格">{{
          station.envPrice
        }}</el-descriptions-item>
        <el-descriptions-item label="合作价格">
          <!-- <template slot="label"> -->
          <div v-for="(value, id) in station.cooperPrice" :key="id">
            {{ value }}
          </div>
          <!-- </template> -->
          <!-- {{ value }} -->
        </el-descriptions-item>
        <el-descriptions-item label="是否对公结款">{{
          station.envPrice
        }}</el-descriptions-item>
        <el-descriptions-item label="是否合作">{{
          station.envPrice
        }}</el-descriptions-item>
        <el-descriptions-item label="结款模式">{{
          station.envPrice
        }}</el-descriptions-item>
        <el-descriptions-item label="检测车辆类型">{{
          station.scale
        }}</el-descriptions-item>
        <el-descriptions-item label="检测站地址">{{
          station.province + station.city + station.area + station.address
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <!-- 模态框 修改-->
    <el-dialog
      title="监测站详情"
      :visible.sync="dialogVisible2"
      center
      width="100%"
    >
      <el-descriptions inline border>
        <el-descriptions-item label="id">
          <el-input v-model="dialogState.id"></el-input>
          <!-- {{ dialogState.id }} -->
        </el-descriptions-item>
        <el-descriptions-item label="监测站名称">
          <el-input v-model="dialogState.name"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系人姓名">
          <el-input v-model="dialogState.liaisonName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="联系人电话">
          <el-input v-model="dialogState.liaisonPhone"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="银行名称">
          <el-input v-model="dialogState.bankName"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="银行账号">
          <el-input v-model="dialogState.bankAccount"></el-input>
        </el-descriptions-item>

        <el-descriptions-item label="安全检测价格">
          <el-input v-model="dialogState.safePrice"></el-input>
        </el-descriptions-item>

        <el-descriptions-item label="设备信息">
          <el-input v-model="dialogState.equipmentInfo"></el-input>
        </el-descriptions-item>
        <el-descriptions-item label="营业时间">
          <el-date-picker
            v-model="dialogState.businessHours"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="HH:mm:ss"
          >
          </el-date-picker>
        </el-descriptions-item>
        <el-descriptions-item label="检测车辆类型">
          <el-select v-model="dialogState.scale" placeholder="请选择">
            <el-option value="大型车">大型车</el-option>
            <el-option value="小型车">小型车</el-option>
          </el-select>
        </el-descriptions-item>
        <el-descriptions-item label="检测环境价格">
          <el-input v-model="dialogState.envPrice"></el-input>
        </el-descriptions-item>

        <el-descriptions-item label="合作价格">
          <span v-for="(value, id) in dialogState.cooperPrice" :key="id">
            {{ value }}
            <!-- <span>价格</span>
            <el-input>{{ value }}</el-input>
            <span>百分比</span>
            <el-input></el-input>
            <span>合作区间</span>
            <el-input></el-input>
            <span>-</span>
            <el-input></el-input>
            <span>辆</span> -->
          </span>
        </el-descriptions-item>

        <el-descriptions-item label="是否对公">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
          <span>结款</span>
        </el-descriptions-item>
        <el-descriptions-item label="是否合作">
          <el-radio v-model="radio" label="3">合作</el-radio>
          <el-radio v-model="radio" label="4">非合作</el-radio>
        </el-descriptions-item>
        <el-descriptions-item label="结款模式"> </el-descriptions-item>

        <el-descriptions-item label="监测站地址">
          <el-input v-model="dialogState.equipmentInfo"></el-input>
          <div id="container"></div>

          <p>经度：</p>
          <el-input v-model="dialogState.coordinate.longitude"></el-input>
          <p>纬度：</p>
          <el-input v-model="dialogState.coordinate.latitude"></el-input>
          <p>详细地址：</p>
          <el-input v-model="dialogState.address"></el-input>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="amend" center>提 交</el-button>
      </span>
    </el-dialog>
    <!-- addForm -->
    <el-dialog
      title="添加检测站"
      :visible.sync="dialogVisible3"
      width="80%"
      center
    >
      <el-form
        label-position="left"
        label-width="80px"
        ref="testStationDto"
        :model="testStationDto"
      >
        <el-form-item label="监测站名称" required>
          <el-input v-model="testStationDto.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" required>
          <el-input v-model="testStationDto.liaisonName"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" required>
          <el-input v-model="testStationDto.liaisonPhone"></el-input>
        </el-form-item>
        <el-form-item label="银行账号" required>
          <el-input v-model="testStationDto.bankAccount"></el-input>
        </el-form-item>
        <el-form-item label="银行名称" required>
          <el-input v-model="testStationDto.bankName"></el-input>
        </el-form-item>
        <el-form-item label="安全检测价格" required>
          <el-input v-model="testStationDto.safePrice"></el-input>
        </el-form-item>
        <el-form-item label="合作价格" v-model="testStationDto.cooperPrice">
          <div>
            <span>价格</span>
            <el-input v-model="testStationDto.price"></el-input>
            <span>百分比</span>
            <el-input v-model="testStationDto.percent"></el-input>
            <span>合作区间</span>
            <el-input v-model="testStationDto.min"></el-input>
            <span>-</span>
            <el-input v-model="testStationDto.max"></el-input>
            <span>辆</span>
          </div>
        </el-form-item>
        <el-form-item label="环境监测价格">
          <el-input v-model="testStationDto.address"></el-input>
        </el-form-item>
        <el-form-item label="检测车辆类型">
          <el-select v-model="testStationDto.scale" placeholder="请选择">
            <el-option value="大型车">大型车</el-option>
            <el-option value="小型车">小型车</el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="是否对公结款">
          <el-radio v-model="radio" label="1">是</el-radio>
          <el-radio v-model="radio" label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="是否合作结款">
          <el-radio v-model="radio" label="3">合作</el-radio>
          <el-radio v-model="radio" label="4">非合作</el-radio>
        </el-form-item>

        <el-form-item label="营业时间">
          <el-date-picker
            v-model="testStationDto.businessHour"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            value-format="HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="监测站地址">
          <el-input
            v-model="testStationDto.equipmentInfo"
            placeholder="请输入监测站名称"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <div id="container" style="width: 500px"></div>
        </el-form-item>

        <el-form-item label="经度">
          <el-input
            v-model="testStationDto.longitude"
            placeholder="请输入经度"
          ></el-input>
        </el-form-item>
        <el-form-item label="纬度">
          <el-input
            v-model="testStationDto.latitude"
            placeholder="请输入纬度"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="testStationDto.address"
            placeholder="详细地址"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="create()">立即创建</el-button>
          <!-- <el-button @click="handlReset(testStationDto)">取消</el-button> -->
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import pickArea from "../../components/pickArea.vue";
import AMapLoader from "@amap/amap-jsapi-loader";

export default {
  components: {
    pickArea,
  },
  // inject: ["reLoad"],
  mounted() {
    this.getStation();
    // 地图初始化
    this.initMap();
  },
  name: "gaode",
  data() {
    return {
      stationData: [],
      query: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
        province: "",
        city: "",
        stationName: "",
      },

      centerDialogVisible: false,
      dialogVisible2: false,
      dialogVisible3: false,

      //详情
      station: {},
      // 修改

      dialogState: {
        coordinate: { latitude: "", longitude: "" },
        cooperPrice: {
          price: "",
          percent: "",
          max: "",
          min: "",
        },
        businessHours: "",
        time: [],
        // price/percent/min
        // allPrice: [],
      },

      // 添加
      // testStationDto: {},
      testStationDto: {
        name: "",
        liaisonName: "",
        naliaisonPhoneme: "",
        bankAccount: "",
        bankName: "",
        safePrice: "",
        cooperPrice: "",
        price: "",
        percent: "",
        min: "",
        max: "",
        address: "",
        scale: "",
        equipmentInfo: "",
        address: "",
        province: "",
        city: "",
        businessHour: "",
      },

      // 单选
      radio: "1",
      // radio: "3",
      // 地图
      map: null,
    };
  },
  methods: {
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      // console.log(this.query.pageSize);
      this.getStation();
    },
    handleCurrentChange(pageNum) {
      this.query.pageNum = pageNum;
      // console.log(this.query.pageNum);
      this.getStation();
    },
    // 获取数据
    getStation: async function () {
      let res = await this.$http.get("/testStation/getAllStation", {
        params: {
          pageNum: this.query.pageNum,
          pageSize: this.query.pageSize,
          province: this.query.province,
          city: this.query.city,
          stationName: this.query.stationName,
          // testStationDto: this.query.testStationDto,
        },
      });
      console.log(res);
      this.stationData = res.data.object.list;
      this.query.total = res.data.object.total;
      // console.log(this.stationData);
      // console.log(this.query.total);
    },

    // 省市区
    getCity(prov, city) {
      // console.log(prov, city);
      this.query.province = prov;
      this.query.city = city;
      this.getStation();
    },
    //监测站
    querySearch(stationName, cb) {
      let suggestions = [];
      this.$http
        .get("/testStation/getAllStation", {
          params: {
            stationName,
          },
        })
        .then((res) => {
          console.log(res);
          res.data.object.list.forEach((item) => {
            // console.log(item);
            suggestions.push({ value: item.name, id: item.id });
          });
        });

      cb(suggestions);
    },
    handleSelect(item) {
      this.query.stationId = item.id;
      //   this.getStation();
    },
    // 检测站详情
    getStationDetail: async function (station) {
      this.station = station;
      console.log(station);
      // console.log(station.cooperPrice);
      console.log(this.station.cooperPrice.split("、"));
      this.station.cooperPrice = this.station.cooperPrice.split("、");

      // 居中
      this.centerDialogVisible = true;
    },
    // 添加检测站

    addStation() {
      this.dialogVisible3 = true;
      // 地图
      this.initMap();
    },
    create(testStationDto) {
      this.add = testStationDto;
      this.$refs.testStationDto.validate(async (valid) => {
        if (valid) {
          const res = this.$http.post("/testStation/addStation", {
            testStationDto: "testStationDto",
          });
          this.$message.success("成功");
        } else {
          this.$message.error("失败");
        }
      });
      // this.$http.post("/testStation/addStation", testStationDto).then((res) => {
      //   console.log(res);
      // });
    },
    // handlReset() {
    //   this.$refs.testStationDto.resetFields();
    // },
    //修改检测站

    updateStation: async function (stationData) {
      //自定义
      //打开模态框
      this.dialogVisible2 = true;
      // 地图
      this.initMap();

      this.dialogState = stationData;
      console.log(this.dialogState);
      //经纬度
      this.dialogState.coordinate = JSON.parse(this.dialogState.coordinate);
      this.dialogState.coordinate.longitude =
        this.dialogState.coordinate.longitude;
      // console.log(this.dialogState.coordinate.longitude);
      this.dialogState.coordinate.latitude =
        this.dialogState.coordinate.latitude;
      // 价格

      console.log(this.dialogState.cooperPrice);
    },
    amend() {
      //请求更新数据
      this.dialogState.coordinate = JSON.stringify(this.dialogState.coordinate);

      let testStation = this.dialogState;
      this.$http.post("/testStation/updateStation", testStation).then((res) => {
        console.log(res);
        console.log(res.data.code);
        //添加message
        if (res.data.code) {
          this.$message.success("修改成功");
          // this.reLoad();
        } else {
          this.$message.success("修改失败");
        }
      });
      //关闭模态框
      this.dialogVisible2 = false;
    },

    initMap() {
      AMapLoader.load({
        key: "ece6260ef4bbfadf792a5d7340bc89d6", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [105.602725, 37.076636], //初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
  },
};
</script>

<style scope>
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 400px;
}
</style>
